<template>
	<view>
		<form class="flowform" @reset="reset">
		
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>学校</label></view>
					<view class="controlvalue">
						<label>闵行春申小学</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>日期</label></view>
					<view class="controlvalue">
						<label>2025-03-15</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>时间</label></view>
					<view class="controlvalue">
						<label>08:00~18:00</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>课程</label></view>
					<view class="controlvalue">
						<label>上海博物馆蛇年迎春展</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>班级</label></view>
					<view class="controlvalue">
						<label>一年级</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>人数</label></view>
					<view class="controlvalue">
						<label>250</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>费用</label></view>
					<view class="controlvalue">
						<label>100/人</label>
					</view>
				</view>
			</view>
					
			<!-- 参考网站 https://blog.csdn.net/YY_ain/article/details/123391460 -->
			<template>
			    <view>
			        <view class="wrap">
			            <view class="u-tabs-box">
			                <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750" ></u-tabs-swiper>
			            </view>
						
			            <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100vh - 35vh)">
			                
							<swiper-item class="swiper-item" >
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待付款</view> -->
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<view class="item">
													<u-parse :html="content1"></u-parse>
											</view>
										</uni-swipe-action>
									</view>
								</view>
			                 
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待收货</view> -->
			                    <view class="jn-grid-list margin-top-20" >
			                    	<view class="jn-staff-list-cell">
			                    		<uni-swipe-action>
											<uni-swipe-action-item v-for="(item,index) in staffs2"  :key="index" >
												
												<u-card :title="item.F_Code">
													<template v-slot:body>
														
														<u-table>
															<u-tr>
																<u-th>序号</u-th>
																<u-th>学籍</u-th>
																<u-th>姓名</u-th>
															</u-tr>
														<view class="staff" v-for="(user,index) in dogetlist(item.F_Name)" :key="index" >
															
															<u-tr>
																<u-td >{{user.ID}}</u-td>
																<u-td >{{user.NO}}</u-td>
																<u-td style="width:300px">{{user.NAME}}</u-td>
															</u-tr>
															
														</view>
													 </u-table>
														
													</template>
													<template v-slot:foot>
														<view class="">人数：{{item.F_Qty}}</u-icon></view>
													</template>
												</u-card>
												
											</uni-swipe-action-item>
			                    		</uni-swipe-action>
			                    	</view>
			                    </view>            
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待收货</view> -->
			                    <view class="jn-grid-list margin-top-20" >
			                    	<view class="jn-staff-list-cell">
			                    		<uni-swipe-action>
			                    			<uni-swipe-action-item v-for="(item,index) in staffs3"  :key="index" >
			                    				
												<u-card :title="item.F_Code">
													<template v-slot:body>
														
														<u-table>
															<u-tr>
																<u-th>座位</u-th>
																<u-th>学籍</u-th>
																<u-th>姓名</u-th>
															</u-tr>
														<view class="staff" v-for="(user,index) in dogetlist(item.F_Name)" :key="index" >
															
															<u-tr>
																<u-td >{{user.ID}}</u-td>
																<u-td >{{user.NO}}</u-td>
																<u-td style="width:300px">{{user.NAME}}</u-td>
															</u-tr>
															
														</view>
													 </u-table>
														
													</template>
													<template v-slot:foot>
														<view class="">人数：{{item.F_Qty}}</u-icon></view>
													</template>
												</u-card>
												
			                    			</uni-swipe-action-item>
			                    		</uni-swipe-action>
			                    	</view>
			                    </view>            
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                     <!-- <view >待评价</view> -->
			                     <view class="jn-grid-list margin-top-20" >
			                     	<view class="jn-staff-list-cell">
			                     		<uni-swipe-action>
			                     			<uni-swipe-action-item v-for="(item,index) in staffs4"  :key="index" >
			                     				
												<u-card :title="item.F_Code"    >
			                     					<template v-slot:body>
														
			                     						<u-table>
															<u-tr>
																<u-th>座位</u-th>
																<u-th>学籍</u-th>
																<u-th>姓名</u-th>
															</u-tr>
														<view class="staff" v-for="(user,index) in dogetlist(item.F_Name)" :key="index" >
															
															<u-tr>
																<u-td >{{user.ID}}</u-td>
																<u-td >{{user.NO}}</u-td>
																<u-td style="width:300px">{{user.NAME}}</u-td>
															</u-tr>
															
														</view>
			                     						</u-table>
														
			                     					</template>
													
			                     					<template v-slot:foot>
			                     						<view class="">餐别：{{item.F_Unit}}</u-icon></view>
			                     					</template>
			                     				</u-card>
												
			                     			</uni-swipe-action-item>
			                     		</uni-swipe-action>
			                     	</view>
			                     </view> 
			                    </scroll-view>
			                </swiper-item>
							
							<swiper-item class="swiper-item">
							    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
							     <!-- <view >待评价</view> -->
							     <view class="jn-grid-list margin-top-20" >
							     	<view class="jn-staff-list-cell">
							     		<uni-swipe-action>
							     			<uni-swipe-action-item v-for="(item,index) in staffs5"  :key="index" >
							     				
												<u-card :title="item.F_Code"    >
							     					<template v-slot:body>
							     						<u-table>
							     							<u-tr>
							     								<u-th>房间</u-th>
							     								<u-th>学籍</u-th>
							     								<u-th>姓名</u-th>
							     							</u-tr>
							     						<view class="staff" v-for="(user,index) in dogetlist(item.F_Name)" :key="index" >
							     							
							     							<u-tr>
							     								<u-td >{{user.ID}}</u-td>
							     								<u-td >{{user.NO}}</u-td>
							     								<u-td style="width:300px">{{user.NAME}}</u-td>
							     							</u-tr>
							     							
							     						</view>
							     						</u-table>
							     					</template>
							     					<template v-slot:foot>
							     						<view class="">人数：{{item.F_Qty}}</u-icon></view>
							     					</template>
							     				</u-card>
												
							     			</uni-swipe-action-item>
							     		</uni-swipe-action>
							     	</view>
							     </view> 
							    </scroll-view>
							</swiper-item>
							
			            </swiper>
			        </view>
			    </view>
			</template>	
			
		</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
		
		<!-- 日历 -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import banner from '@/pages/index/banner/banner.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	
	export default {
		components: {
			banner,
			uniNoticeBar,
			// Tabar
		},
		data() {
			return {
				content1:'<p>08:00 学校大门口集合</p><p>09:00 到达上海博物馆停车场</p><p>09:30 集合按班级顺序入门</p><p>10:00 按班级参观</p><p>16:00 集合上车</p><p>17:30 到学校大门口</p> ',
				content2:'<p>展期：2025-01-14 - 2025-03-02<p>展览地点：上海博物馆人民广场馆四楼第三展览厅<p> ',
				
				list: [
					{
						name: '行程安排',
						//count: 3
					},
					{
						name: '学生列表',
						//count: 2
					},
					{
						name: '车辆安排',
						//count: 2
					},
					{
						name: '餐饮安排',
						//count: 2
					},
					{
						name: '住宿安排',
						//count: 2
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				
				show: false,
				mode: 'date',
				datevalue: this.getdate(),
				
				staffList1: [],
				staffList2: [],
				staffList3: [],
				staffList4: [],
				staffList5: [],
				
				multiple: false, //多选
				selectParent: false, //父级可选
				
				type: 'textarea',
				border: false,
				height: 100,
				autoHeight: true,
				staff: {
					billno:'K241130001',
					billcredate:'2025-01-06',
					billtime:'09:00~10:30',
					workingNature:'奉化学楼101',
					fullName: '宋江',
					node: '有机化学实验操作课',
					idNumber: '',
				},
				mode: '',
				isSearchShow:false,
				pickerList: [],
				isId:false,
				listId:''
			}
		},
		onLoad(e) {
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id');
			this.listId = e.id;
			
			this.init();
		},
		computed: {
			//预约工位内容
			staffs1: function() {
				let search = this.search;
				let staffList = this.staffList1;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约设备内容
			staffs2: function() {
				let search = this.search;
				let staffList = this.staffList2;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约危化品内容
			staffs3: function() {
				let search = this.search;
				let staffList = this.staffList3;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约耗材内容
			staffs4: function() {
				let search = this.search;
				let staffList = this.staffList4;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约耗材内容
			staffs5: function() {
				let search = this.search;
				let staffList = this.staffList5;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		onReady(){
					uni.getSystemInfo({
						success: (res) => {
							let topHeight = 100;
							let winHeight = (res.windowHeight * (750/res.windowWidth));
							// boxHeight为屏幕高度 - 顶部高度
							this.boxHeight = winHeight - topHeight + 'rpx';
						}
					});
				},
		methods: {
			  /* 根据不同用户返回不同菜单 */
			  dogetlist(jsonArrStr){
				//console.log(jsonArrStr);
				var jsonArr = JSON.parse(jsonArrStr);//将字符串 转为 json对象 数组 JSON.parse要求 json格式 严格
				//console.log(jsonArr);
				
				return jsonArr;
			 },
			getdate(){
			   //返回当前日期
			   let date = new Date();
			   let formattedDate = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }); // 输出格式如 "2023-01-01"
			   console.log(formattedDate);
			   return formattedDate;
			},
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list1": [
								{
									"enCode": "1",
									"fullCode": "1-1",
									"fullName": "1号工位"
								},
								{
									"enCode": "2",
									"fullCode": "1-2",
									"fullName": "2号工位"
								},
								{
									"enCode": "3",
									"fullCode": "1-3",
									"fullName": "3号工位"
								}
							  ],
							"list2": [
								{
									"enCode": "1",
									"fullCode": "老师:诸葛亮",
									"fullName": '[{"ID":"1","NO":"060001","NAME":"刘阿斗"},{"ID":"2","NO":"060002","NAME":"关平"},{"ID":"3","NO":"060003","NAME":"张苞"}]',
								},
								{
									"enCode": "2",
									"fullCode": "老师:曹操",
									"fullName": '[{"ID":"1","NO":"050001","NAME":"曹丕"},{"ID":"2","NO":"050002","NAME":"曹植"},{"ID":"3","NO":"050003","NAME":"曹冲"},{"ID":"4","NO":"050004","NAME":"曹昂"}]',
								},
								{
									"enCode": "3",
									"fullCode": "老师:东吴",
									"fullName": '[{"ID":"1","NO":"070001","NAME":"孙权"},{"ID":"2","NO":"070002","NAME":"孙策"},{"ID":"3","NO":"070003","NAME":"诸葛瑾"},{"ID":"4","NO":"070004","NAME":"周瑜"},{"ID":"5","NO":"070005","NAME":"黄盖"}]',
								}
							  ],
							"list3": [
								{
									"enCode": "10:00:08",
									"fullCode": "车牌:沪A-TH557",
									"fullName": '[{"ID":"1","NO":"060001","NAME":"刘阿斗"},{"ID":"2","NO":"060002","NAME":"关平"},{"ID":"3","NO":"060003","NAME":"张苞"}]',
									"fqty":3,
									"funit":"ml"
								},
								{
									"enCode": "10:00:08",
									"fullCode": "车牌:沪A-TH558",
									"fullName": '[{"ID":"1","NO":"050001","NAME":"曹丕"},{"ID":"2","NO":"050002","NAME":"曹植"},{"ID":"3","NO":"050003","NAME":"曹冲"},{"ID":"4","NO":"050004","NAME":"曹昂"}]',
									"fqty":4,
									"funit":"ml"
								},
								{
									"enCode": "10:00:08",
									"fullCode": "车牌:沪A-TH559",
									"fullName": '[{"ID":"1","NO":"070001","NAME":"孙权"},{"ID":"2","NO":"070002","NAME":"孙策"},{"ID":"3","NO":"070003","NAME":"诸葛瑾"},{"ID":"4","NO":"070004","NAME":"周瑜"},{"ID":"5","NO":"070005","NAME":"黄盖"}]',
									"fqty":5,
									"funit":"ml"
								}
							  ],
							"list4": [
								{
									"enCode": "1",
									"fullCode": "桌号:101",
									"fullName": '[{"ID":"1","NO":"060001","NAME":"刘阿斗"},{"ID":"2","NO":"060002","NAME":"关平"},{"ID":"3","NO":"060003","NAME":"张苞"},{"ID":"4","NO":"050001","NAME":"曹丕"},{"ID":"5","NO":"050002","NAME":"曹植"},{"ID":"6","NO":"050003","NAME":"曹冲"},{"ID":"7","NO":"050004","NAME":"曹昂"}]',
									"fqty":7,
									"funit":"午餐"
								},
								{
									"enCode": "2",
									"fullCode": "桌号:103",
									"fullName": '[{"ID":"1","NO":"070001","NAME":"孙权"},{"ID":"2","NO":"070002","NAME":"孙策"},{"ID":"3","NO":"070003","NAME":"诸葛瑾"},{"ID":"4","NO":"070004","NAME":"周瑜"},{"ID":"5","NO":"070005","NAME":"黄盖"}]',
									"fqty":5,
									"funit":"午餐"
								}
							  ],
							"list5": [
								{
									"enCode": "1",
									"fullCode": "房号:501",
									"fullName": '[{"ID":"1","NO":"060001","NAME":"刘阿斗"},{"ID":"2","NO":"060002","NAME":"关平"},{"ID":"3","NO":"060003","NAME":"张苞"}]',
									"fqty":3,
									"funit":"午餐"
								},
								{
									"enCode": "2",
									"fullCode": "房号:502",
									"fullName": '[{"ID":"1","NO":"050001","NAME":"曹丕"},{"ID":"2","NO":"050002","NAME":"曹植"},{"ID":"3","NO":"050003","NAME":"曹冲"}]',
									"fqty":3,
									"funit":"午餐"
								},
								{
									"enCode": "2",
									"fullCode": "房号:503",
									"fullName": '[{"ID":"1","NO":"070001","NAME":"孙权"},{"ID":"2","NO":"070002","NAME":"孙策"},{"ID":"3","NO":"070003","NAME":"诸葛瑾"}]',
									"fqty":3,
									"funit":"午餐"
								},
								,
								{
									"enCode": "2",
									"fullCode": "房号:505",
									"fullName": '[,{"ID":"4","NO":"050004","NAME":"曹昂"},{"ID":"4","NO":"070004","NAME":"周瑜"},{"ID":"5","NO":"070005","NAME":"黄盖"}]',
									"fqty":3,
									"funit":"午餐"
								}
							  ],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 635
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				let staff1 = res.data.data.list1;
				this.staffList1=[];
				for (let i = 0; i < staff1.length; i++) {
					this.staffList1.push({
						'F_EnCode': staff1[i].enCode,
						'F_Code'  : staff1[i].fullCode,
						'F_Name'  : staff1[i].fullName
					})
				}
				
				let staff2 = res.data.data.list2;
				this.staffList2=[];
				for (let i = 0; i < staff2.length; i++) {
					this.staffList2.push({
						'F_EnCode': staff2[i].enCode,
						'F_Code'  : staff2[i].fullCode,
						'F_Name'  : staff2[i].fullName
					})
				}
				
				let staff3 = res.data.data.list3;
				this.staffList3=[];
				for (let i = 0; i < staff3.length; i++) {
					this.staffList3.push({
						'F_EnCode': staff3[i].enCode,
						'F_Code'  : staff3[i].fullCode,
						'F_Name'  : staff3[i].fullName,
						'F_Qty'   : staff3[i].fqty,
						'F_Unit'  : staff3[i].funit
					})
				}
				
				let staff4 = res.data.data.list4;
				this.staffList4=[];
				for (let i = 0; i < staff4.length; i++) {
					this.staffList4.push({
						'F_EnCode': staff4[i].enCode,
						'F_Code'  : staff4[i].fullCode,
						'F_Name'  : staff4[i].fullName,
						'F_Qty'   : staff4[i].fqty,
						'F_Unit'  : staff4[i].funit
					})
				}
				
				let staff5 = res.data.data.list5;
				this.staffList5=[];
				for (let i = 0; i < staff5.length; i++) {
					this.staffList5.push({
						'F_EnCode': staff5[i].enCode,
						'F_Code'  : staff5[i].fullCode,
						'F_Name'  : staff5[i].fullName,
						'F_Qty'   : staff5[i].fqty,
						'F_Unit'  : staff5[i].funit
					})
				}
				
			},
			
			open() {
				    console.log('消息提示');
			        uni.showToast({
			        	title: '新增弹窗',
			        	duration: 2000
			        });
			      },
				  			
			submit() {
				//console.log('返回上一页成功');
				// 在某个事件或条件下触发返回上一页操作
				uni.navigateBack({
				    delta: 1, // 返回的页面数，如果是1表示返回上一级页面，可以根据需求调整
				    success: function() {
				        console.log('返回上一页成功');
				    },
				    fail: function(error) {
				        console.error('返回上一页失败', error);
				    }
				});

			},
			reset(e) {
				//console.log('清空数据')
			},
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
	
	.u-content {
			margin-top: 100rpx;
			color: $u-content-color;
			font-size: 32rpx;
			line-height: 1.8;
			
			// 标签形式无效
			p {
				color: $u-tips-color;
			}
		}
		
	.swiper-back {
		background: #3281FF !important;
		/* background: linear-gradient(to bottom, #4869EE 70%, #f0f2f6 30%) !important; */
		position: relative;
		height: calc(280rpx + 88rpx);
		margin-bottom: 80upx;
		
	}
</style>
